<template>
    <div v-if="store.auth.role!='学生'">
    <el-button class="mt-4" style="" @click="dialogVisible=true" type="success">新增</el-button>
    </div>
    <div v-if="store.auth.role!='学生'">
        <el-input placeholder="按课程号搜索" v-model="courseidd" type="text" style="width: 140px"/>
        <el-button type="primary" @click="searchbycourseid">搜索</el-button>
        <el-input placeholder="按教师名字搜索" v-model="tname" type="text" style="width: 140px"/>
        <el-button type="primary" @click="searchbytname">搜索</el-button>
        <el-input placeholder="按课程名字搜索" v-model="coursenamee" type="text" style="width: 140px"/>
        <el-button type="primary" @click="searchbycoursename">搜索</el-button>
    </div>
    <el-table :data="datas.slice((pageNum-1)*pageSize,pageNum*pageSize)" style="width: 100%" max-height="250" border>
        <el-table-column fixed label="序号" width="200">
            <template #default="scopes">
                {{ scopes.$index+1 }}
            </template>
        </el-table-column>
        <el-table-column fixed prop="courseid" label="课程号" width="200" />
        <el-table-column fixed prop="id" label="工号" width="200" />
        <el-table-column fixed prop="teachername" label="教师姓名" width="200" />
        <el-table-column prop="coursename" label="科目名称" width="200" />
       <el-table-column prop="type" label="科目类型" width="200" />
      <el-table-column prop="time" label="学时" width="200" />
        <el-table-column prop="gredit" label="学分" width="200" />
        <el-table-column prop="term" label="开课时期" width="200" />
        <el-table-column prop="begintime" label="开课时间" width="200" />
        <el-table-column prop="endtime" label="结课时间" width="200" />
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <div v-if="store.auth.role!='学生'">
                <el-button
                        link
                        type="primary"
                        size="small"
                        @click.prevent="deleteRow(scope.$index)"
                >
                    删除
                </el-button>
                <el-button
                        link
                        type="primary"
                        size="small"
                        @click.prevent="getCourseByid(scope.$index)"
                >
                    修改
                </el-button>
                </div>
                <div v-if="store.auth.role=='学生'">无权限操作</div>
            </template>
        </el-table-column>
    </el-table>
        <div class="pagination">
            <el-pagination
                    background
                    layout="sizes,prev,pager,next,jumper,->,total"
                    :page-size.sync="pageSize"
                    :current-page.sync="pageNum"
                    :page-sizes="[5,8,10,15]"
                    :total="totals"
                    :hide-on-single-page="true"
                    @current-change="getList"
                    @size-change="getList1"
            />
        </div>
    <el-dialog title="填写信息" v-model="dialogVisible">
        <el-form :model="cou">
            <el-input placeholder="课程号" v-model="cou.courseid" type="text" />
            <el-input placeholder="工号" v-model="cou.id" type="text" />
            <el-input placeholder="教师姓名" v-model="cou.teachername" type="text" />
            <el-input placeholder="科目名称" v-model="cou.coursename" type="text" />
          <el-select v-model="cou.type" placeholder="科目类型" clearable>
            <el-option label="必修" value="1" />
            <el-option label="选修" value="2" />
          </el-select>
          <el-input placeholder="学时" v-model="cou.time" type="text" />
            <el-input placeholder="学分" v-model="cou.gredit" type="text" />
            <el-input placeholder="开课学期" v-model="cou.term" type="text" />
            <el-input placeholder="开课时间" v-model="cou.begintime" type="Date" />
            <el-input placeholder="结课时间" v-model="cou.endtime" type="Date" />
            <el-button type="warning" @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="add">确认</el-button>
        </el-form>
    </el-dialog>
    <el-dialog title="修改信息" v-model="dialogVisibles">
        <el-form :model="cous">
            <el-input placeholder="课程号" v-model="cous.courseid" type="text" disabled/>
            <el-input placeholder="工号" v-model="cous.id" type="text" />
            <el-input placeholder="教师姓名" v-model="cous.teachername" type="text" />
            <el-input placeholder="科目名称" v-model="cous.coursename" type="text" />
            <el-input placeholder="学分" v-model="cous.gredit" type="text" />
            <el-input placeholder="开课学期" v-model="cous.term" type="text" />
            <el-input placeholder="开课时间" v-model="cous.begintime" type="text" />
            <el-input placeholder="结课时间" v-model="cous.endtime" type="text" />
            <el-button type="warning" @click="dialogVisibles=false">取消</el-button>
            <el-button type="primary" @click="adds">确认</el-button>
        </el-form>
    </el-dialog>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import {ElMessage} from 'element-plus'
import { get,post } from '@/utils/request.js'
import { reactive } from 'vue'
import moment from 'moment';
import {userStore} from '@/stores/counter.js'

const store=userStore()
const datas=ref([])
const dialogVisible=ref(false)
const dialogVisibles=ref(false)
const num=ref('')
const nums=ref('')
const courseidd=ref('')
const tname=ref('')
const coursenamee=ref('')
const types=ref('')
const totals=ref('')
const pageNum=ref(1)
const pageSize=ref(5)

const cou = reactive({
courseid:'',
id:'',
teachername:'',
coursename:'',
type:'',
time:'',
gredit:'',
term:'',
begintime:'',
endtime:''
})

const cous = reactive({
courseid:'',
id:'',
teachername:'',
coursename:'',
type:'',
time:'',
gredit:'',
term:'',
begintime:'',
endtime:''
})

onMounted(async () => {
    get('/getCourse',(message)=>{
    totals.value=message.length
    datas.value = message.map(item=>({
    ...item,
     begintime: moment(item.begintime).format('YYYY-MM-DD'),
     endtime: moment(item.endtime).format('YYYY-MM-DD'),
    }))
    },(message)=>{
    ElMessage.warning(message)
    })
})

const deleteRow = (index) => {
post('/deletecourse',{
courseid:datas.value[index].courseid
},(message)=>{
ElMessage.success(message)
num.value=index
datas.value.splice(index, 1)
},(message)=>{
ElMessage.warning(message)
})
}

const add=()=>{
post('/addcourse',{
courseid:cou.courseid,
id:cou.id,
teachername:cou.teachername,
coursename:cou.coursename,
type:cou.type,
time:cou.time,
gredit:cou.gredit,
term:cou.term,
begintime:cou.begintime,
endtime:cou.endtime
},(message)=>{
ElMessage.success(message)
dialogVisible.value = false
datas.value.push({
courseid:cou.courseid,
id:cou.id,
teachername:cou.teachername,
coursename:cou.coursename,
type:cou.type,
time:cou.time,
gredit:cou.gredit,
term:cou.term,
begintime:cou.begintime,
endtime:cou.endtime
  })
cou.courseid='',
cou.id='',
cou.teachername='',
cou.coursename='',
cou.type='',
cou.time='',
cou.gredit='',
cou.term='',
cou.begintime='',
cou.endtime=''
},(message)=>{
ElMessage.warning(message)
dialogVisible.value = false
cou.courseid='',
cou.id='',
cou.teachername='',
cou.coursename='',
cou.type='',
cou.time='',
cou.gredit='',
cou.term='',
cou.begintime=new Date(),
cou.endtime=new Date()
})
}


const getCourseByid=(index)=>{
post('/getcoursebyid',{
courseid:datas.value[index].courseid
},(message)=>{
dialogVisibles.value=true
cous.courseid=message.courseid
cous.id=message.id
cous.teachername=message.teachername
cous.coursename=message.coursename
cous.type=message.type
cous.time=message.time
cous.gredit=message.gredit
cous.term=message.term
cous.begintime=moment(message.begintime).format('YYYY-MM-DD')
cous.endtime=moment(message.endtime).format('YYYY-MM-DD')
},(message)=>{
ElMessage.warning(message)
})
}

const searchbycourseid=()=>{
post('/getcoursebyid',{
courseid:courseidd.value
},(message)=>{
datas.value = []
datas.value.push({
courseid:message.courseid,
id:message.id,
teachername:message.teachername,
coursename:message.coursename,
type:message.type,
time:message.time,
gredit:message.gredit,
term:message.term,
begintime:moment(message.begintime).format('YYYY-MM-DD'),
endtime:moment(message.endtime).format('YYYY-MM-DD')
})
courseidd.value=''
},(message)=>{
courseidd.value=''
ElMessage.warning(message)
})
}

const searchbytname=()=>{
post('/getcoursebytname',{
teachername:tname.value
},(message)=>{
datas.value = []
    datas.value = message.map(item=>({
    ...item,
     begintime: moment(item.begintime).format('YYYY-MM-DD'),
     endtime: moment(item.endtime).format('YYYY-MM-DD'),
    }))
    tname.value=''
    },(message)=>{
tname.value=''
ElMessage.warning(message)
})
}

const searchbycoursename=()=>{
post('/getcoursebycoursename',{
coursename:coursenamee.value
},(message)=>{
   datas.value = []
    datas.value = message.map(item=>({
    ...item,
     begintime: moment(item.begintime).format('YYYY-MM-DD'),
     endtime: moment(item.endtime).format('YYYY-MM-DD'),
    }))
    coursenamee.value=''
    },(message)=>{
coursenamee.value=''
ElMessage.warning(message)
})
}

const adds=()=>{
post('/updatecourse',{
courseid:cous.courseid,
id:cous.id,
teachername:cous.teachername,
coursename:cous.coursename,
gredit:cous.gredit,
term:cous.term,
begintime:cous.begintime,
endtime:cous.endtime
},(message)=>{
ElMessage.success(message)
dialogVisibles.value = false
datas.value.splice(num,1,cous)
},(message)=>{
ElMessage.warning(message)
dialogVisibles.value = false
})
}

const getList=(pageNums)=>{
pageNum.value=pageNums
}

const getList1=(pageSizes)=>{
pageSize.value=pageSizes
}
</script>
<style scoped>
  .pagination {
  margin-top: 10px;
  text-align: center;
}
</style>